<template>
  <div class="search-box">
    <div class="search-box-left">
      <el-dropdown>
        <span class="el-dropdown-link"
          >{{ text[0] }}<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item id="1" @click.native="change">{{
            text[1]
          }}</el-dropdown-item>
          <el-dropdown-item id="2" @click.native="change">{{
            text[2]
          }}</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <div class="search-box-right">
      <el-input
        v-model="input"
        type="text"
        prefix-icon="iconfont icon-search"
        @keyup.enter.native="search"
      ></el-input>
      <el-button @click="search">搜索</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      input: '',
      text: ['宝贝', '店铺']
    }
  },
  methods: {
    search () {
      this.$router.push({ path: 'Search', query: { input: this.input, type: this.text[0] } })
      this.$router.go(0)
    },
    change (event) {
      let temp = ''
      temp = this.text[event.target.id]
      this.$set(this.text, event.target.id, this.text[0])
      this.$set(this.text, 0, temp)
    }
  }
}
</script>

<style lang="less" scoped>
.search-box {
  width: 700px;
  height: 50px;
  display: flex;
  background-color: white;
  border-radius: 50px;
  .search-box-left {
    width: 100px;
    height: 100%;
    position: relative;
    .el-dropdown {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    /deep/ .el-dropdown-link {
      font-size: 15px;
    }
  }
  .search-box-right {
    width: 600px;
    height: 100%;
    display: flex;
    .el-input--prefix {
      height: 100%;
    }
    /deep/ .el-input__inner {
      border: none;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      &:focus {
        border-radius: 0;
        border-bottom: 1px solid #f40;
        outline: 0;
      }
    }
    .el-button {
      width: 100px;
      margin: 4px;
      padding: 0;
      border-radius: 50px;
      background-color: #f40;
      font-size: 20px;
      color: white;
      &:hover {
        color: white;
      }
    }
  }
}
</style>
